<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>按钮工具条</title>
    <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/cetc54.ui.all.css">

</head>
<body>
<p></p>
<button type="button" id="btnDisable">不可用</button>
<button type="button" id="btnEnable">可用</button>
<button type="button" id="btnShow">导出按钮可见</button>
<button type="button" id="btnHide">导出按钮不可见</button>
<div id="btnbar">
    <button type="button" id="btn1"  ui-config="icons:{left:'icon_add'},style:'button_submit'">新建</button>
    <button type="button" id="btn3" ui-config="icons:{left:'icon_edit'},style:'button_submit'">编辑</button>
    <button type="button" id="btn2"  ui-config="icons:{left:'icon_delete'},style:'button_danger',onClick: function(){click(this.id)}">删除</button>
    <span class="sep"></span>
    <button type="button" id="btn4" ui-config="style:'button_submit'">导出</button>
</div>
</body>
<script type="text/javascript" src="../../lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../release/cetc54.ui.all.js"></script>
<script>
    $(function () {
        var btnbar = $('#btnbar').uiButtonBar({
            direction: 'left'
        });
        $('#btnDisable').uiButton({onClick: function () {
            btnbar.uiButtonBar('disable');
        }});
        $('#btnEnable').uiButton({onClick: function () {
            btnbar.uiButtonBar('enable');
        }});
        $('#btnShow').uiButton({onClick: function () {
            $('#btn4').show();
        }});
        $('#btnHide').uiButton({onClick: function () {
            $('#btn4').hide();
        }});
    })
    function click(id) {
        alert($('#' + id).uiButton('getLabel'));
    }
</script>
</html>